<template>
  <div class="app-main">
    <div class="app-left" v-if="menuPostion === 'left'">
      <div class="app-left-wrapper normal-shadow">
        <div class="app-name" @click="goHome">
          <!-- 应用名应用名 -->
        </div>
        <LeftMenu ref="leftMenu" />
      </div>
    </div>

    <el-container :class="menuPostion === 'left' ? 'app-right' : ''">
      <el-header v-if="menuPostion === 'top'">
        <TopMenu ref="leftMenu" />
      </el-header>
      <el-main>
        <RouterView v-slot="{ Component }" class="view-area">
          <keep-alive>
            <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
        </RouterView>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router'
import TopMenu from './components/TopMenu.vue'
import LeftMenu from './components/LeftMenu.vue'
import { InitHTMLTheme } from '@/common/utils'
import { useRouter } from 'vue-router'
import { ref, onBeforeMount, onMounted } from 'vue'
import { userSettingsStore } from './stores/settings'

const leftMenu = ref<InstanceType<typeof TopMenu>>()

const settingStore = userSettingsStore()

const { menuPostion } = storeToRefs(settingStore)

/**
 * 在子组件创建之前执行
 */
onBeforeMount(() => {
  InitHTMLTheme()
})

/**
 * 在子组件mounted之后执行
 */
onMounted(() => {
  // appMounted = true
  console.log(`leftMenu.value?.$data`, leftMenu.value?.$)
  console.log('import.meta.env.npm_package_version', import.meta.env.npm_package_version)
})
//@ts-ignore
let appMounted = $ref(false)

const router = useRouter()

const goHome = () => {
  router.push({
    path: '/',
    // name: 'home',
    query: {
      msg: 'hello'
    }
  })
}
</script>
<style scoped lang="scss">
$blankWidth: 20px;

.app-main {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;

  .el-header {
    padding: 0;
  }
  .el-main {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }

  :deep(.app-left) {
    // width: 200px;

    box-sizing: border-box;
    padding: $blankWidth 0 $blankWidth $blankWidth;
    height: 100%;

    // box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    .app-left-wrapper {
      background-color: var(--color-background);
      display: flex;
      flex-direction: column;
      position: relative;
      height: 100%;
      border-radius: 1rem;
      overflow: hidden;

      .app-name {
        height: 30px;
        text-align: center;
        color: var(--color-text);
        // border-right: 1px solid var(--el-menu-border-color);
        box-sizing: border-box;
        padding: 5px;
        word-spacing: normal;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .left-menu {
        position: relative;

        // box-shadow: var(--box-shadow);
        .el-menu {
          color: var(--color-text);
          background-color: var(--color-background);
          border-right: 0;
        }
      }
    }
  }

  .app-right {
    flex: 1;

    .el-container {
      height: 100%;

      .app-right-container-header {
        height: 50px;
        box-sizing: border-box;
        margin: $blankWidth $blankWidth 0 $blankWidth;
        background-color: var(--color-background);
        border-bottom: 1px solid var(--el-menu-border-color);
        // position: relative;
        // border-bottom: 1px solid var(--el-border-color);
        // box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
      }

      .app-right-container-main {
        padding: $blankWidth !important;
        // box-shadow: var(--inset-box-shadow);
      }
    }
  }
}
</style>
<style scoped lang="scss">
html.dark {
}
</style>

<style>
.view-area {
  box-sizing: border-box !important;
  border-radius: 4px;
  /* padding: 5px; */
  background-color: var(--color-background);
  overflow-y: auto;
  border-radius: 1rem;
  padding: 20px;
}
.normal-shadow {
  box-shadow: var(--box-shadow);
}
</style>
